<template>
  <el-dialog
    title="图标选择"
    :close-on-click-modal="false"
    class="jsbos-dialog jsbos-dialog_center icon-dialog"
    lock-scroll
    append-to-body
    v-bind="$attrs"
    width="950px"
    :modal-append-to-body="false"
    v-on="$listeners"
    @open="onOpen"
    @close="onClose"
  >
    <div slot="title" class="icon-dialog-title">
      图标选择
      <el-input
        v-model="keyword"
        placeholder="请输入图标名称"
        prefix-icon="el-icon-search"
        clearable
      />
    </div>
    <el-tabs class="jsbos-el_tabs" v-model="activeName">
      <el-tab-pane label="ymIcon 图标">
        <div class="icon-box-list">
          <el-button
            v-for="(item, index) in ymIconsList"
            :key="index"
            @click="iconActiveHandle(generateYmIconCode(item))"
            :class="{ 'is-active': generateYmIconCode(item) === active }"
          >
            <i :class="generateYmIconCode(item)" />
          </el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="Element-UI 图标">
        <div class="icon-box-list">
          <el-button
            v-for="(item, index) in elementIconsList"
            :key="index"
            @click="iconActiveHandle(item)"
            :class="{ 'is-active': item === active }"
          >
            <i :class="item" />
          </el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="阿里图标">
        <div class="icon-box-list">
          <el-button
            v-for="(item, index) in aliIconsList"
            :key="index"
            @click="iconActiveHandle(generateAliIconCode(item))"
            :class="{ 'is-active': generateAliIconCode(item) === active }"
          >
            <i :class="generateAliIconCode(item)" />
          </el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="ymCustom 图标">
        <div class="icon-box-list">
          <el-button
            v-for="(item, index) in ymCustomList"
            :key="index"
            @click="iconActiveHandle(generateYmCustomCode(item))"
            :class="{ 'is-active': generateYmCustomCode(item) === active }"
          >
            <i :class="generateYmCustomCode(item)" />
          </el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">{{
        $t("common.cancelButton")
      }}</el-button>
      <el-button type="primary" @click="choiceIcon()">{{
        $t("common.confirmButton")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import elementIconsJson from "static/json/element-icons.json";
import ymIconsJson from "static/json/ymIcon.json";
import ymCustomJson from "static/json/ymCustom.json";
import aliIcon from "static/json/aliIcon.json";
const ymIcons = ymIconsJson.glyphs.map((o) => `icon-ym-${o.font_class}`);
const ymCustom = ymCustomJson.glyphs.map((o) => `ym-custom-${o.font_class}`);
const elementIcons = elementIconsJson.map((name) => `el-icon-${name}`);
const aliIcons = aliIcon.glyphs.map((o) => `icon10-${o.font_class}`);
export default {
  props: ["current"],
  data() {
    return {
      elementIcons,
      ymIcons,
      ymCustom,
      aliIcons,
      active: null,
      keyword: "",
      ymIconsList: [],
      ymCustomList: [],
      elementIconsList: [],
      aliIconsList: [],
      activeName: "",
    };
  },
  watch: {
    keyword(val) {
      this.search();
    },
    activeName(val) {
      if (this.keyword) {
        this.keyword = "";
      } else {
        this.search();
      }
    },
  },
  methods: {
    search() {
      let key = "";
      if (this.activeName == "0") {
        key = "ymIcons";
      } else if (this.activeName == "1") {
        key = "elementIcons";
      } else if (this.activeName == "2") {
        key = "aliIcons";
      } else if (this.activeName == "3") {
        key = "ymCustom";
      }
      if (this.keyword) {
        this[key + "List"] = this[key].filter(
          (o) => o.indexOf(this.keyword) > -1
        );
      } else {
        this[key + "List"] = this[key];
      }
    },
    onOpen() {
      this.active = this.current;
      this.keyword = "";
    },
    onClose() {},
    closeDialog() {
      this.$emit("update:visible", false);
    },
    choiceIcon() {
      if (!this.active) return;
      this.$emit("choiceIcon", this.active);
      this.$emit("update:visible", false);
    },
    generateYmIconCode(symbol) {
      return `icon-ym ${symbol}`;
    },
    generateYmCustomCode(symbol) {
      return `ym-custom ${symbol}`;
    },
    generateAliIconCode(symbol) {
      return `iconfont10 ${symbol}`;
    },
    iconActiveHandle(item) {
      this.active = item;
    },
  },
};
</script>
<style lang="scss" scoped>
.icon-dialog {
  .icon-dialog-title {
    font-size: 18px;
    .el-input {
      width: 260px;
      margin-left: 10px;
    }
  }
  >>> .el-dialog__body {
    height: 70vh;
    padding: 0 20px !important;
  }
}
.icon-box-list {
  padding-bottom: 8px;
  > .el-button {
    margin: 8px 0 0 8px;
    width: 60px;
    height: 60px;
    padding: 0;
    >>> span {
      width: 60px;
      height: 60px;
      display: inline-block;
      line-height: 60px;
      text-align: center;
      transition: 300ms;
      [class^="el-icon-"] {
        margin-top: 17px;
      }
      .fa {
        margin-top: 17px;
      }
    }
    i {
      font-size: 24px;
    }
    &:hover {
      >>> span {
        transform: scale(1.8);
      }
    }
  }
}
</style>
